<div class="methodPanel fd-page fd-page-navigate">
    <farris-splitter class="fd-page-content f-component-splitter">
        <farris-splitter-pane class="px-0 f-component-splitter-pane fd-page-content-nav" style="width:180px;"
            [rzMinWidth]="120" ngResizable [rzHandles]="'e'" [rzMaxWidth]="450">
            <div class="vm-list">
                <ul class="f-list-view-group">
                    <div *ngFor="let item of viewModelTabs;"
                        [class.f-listview-active]="activeViewModel && activeViewModel.id===item.id"
                        (click)="onViewModelChanged(item.id)">
                        <div class="f-list-content">
                            <div class="f-template-listnav-row">
                                <div class="list-nav-link"
                                    [class.active]="activeViewModel && activeViewModel.id===item.id">
                                    <span class="nav-item-name" [title]="item.componentId"> {{item.name}} </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </ul>
            </div>
        </farris-splitter-pane>

        <div class="fd-page-content-main f-component-splitter-pane">
            <div class="h-100 f-utils-fill-flex-column ml-3 f-utils-overflow-xayh">
                <div class="vm-toolbar">
                    <div class="toolbar-item" (click)="onAddMethod()">
                        <div class="toolbar-item-icon toolbar-item-icon-add"></div>
                        <span class="toolbar-item-text">添加方法</span>
                    </div>
                    <div class="toolbar-item-spilter"></div>
                    <div class="toolbar-item" (click)="onDeleteMethod()">
                        <div class="toolbar-item-icon toolbar-item-icon-delete"></div>
                        <span class="toolbar-item-text">删除方法</span>
                    </div>
                    <div class="toolbar-item-spilter"></div>
                    <div class="toolbar-item" (click)="onEditMethod()" [class.disable]="inValidCommandSelected">
                        <div class="toolbar-item-icon toolbar-item-icon-edit"></div>
                        <span class="toolbar-item-text">编辑方法</span>
                    </div>
                </div>


                <div class="f-utils-fill-flex-row main-panel">

                    <div class="f-utils-fill w-50 commandPanel border">
                        <farris-treetable #tt [data]="commandsData" [columns]="commandsDataColumn" [showBorder]="false"
                            [showHeader]="true" [fixedHeader]="true" [fit]="true" idField="id" [striped]="true"
                            [singleSelect]="true" [showCheckbox]="false" [rowStyler]="rowCls"
                            (nodeSelected)="changeSelectedComand($event)">
                        </farris-treetable>
                    </div>

                    <div class="paramPanel w-50">
                        <div class="f-struct-wrapper"
                            *ngIf="currentTreeNode && isSelectCommandNode && currentTreeNode.data.controllerName ">
                            <div class="f-section-form f-section-in-main f-section pt-0">
                                <div class="f-section-header">
                                    <div class="f-title">
                                        <h4 class="f-title-text">控制器</h4>
                                    </div>
                                </div>
                                <div class="f-section-content pl-2">
                                    <div class="col-12 mb-2 d-inline-block">
                                        <div class="farris-group-wrap">
                                            <div class="form-group farris-form-group">
                                                <label class="col-form-label">
                                                    <span
                                                        class="farris-label-text">{{currentTreeNode.data.controllerName}}【{{currentTreeNode.data.controllerCode}}】
                                                    </span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="f-struct-wrapper"
                            *ngIf="currentTreeNode && isSelectCommandNode && paramsData.length">
                            <div class="f-section-form f-section-in-main f-section pt-0">
                                <div class="f-section-header">
                                    <div class="f-title">
                                        <h4 class="f-title-text">方法参数</h4>
                                        <span title="构件中方法的参数发生变更，请点击更新" class="update-param text-warning"
                                            *ngIf="currentTreeNode.needRefreshParam"
                                            (click)="updateCommandParamFromWebCmd(rowNode)">
                                            <i class="ml-2 f-icon f-icon-recurrence"></i>
                                            更新
                                        </span>
                                    </div>
                                </div>
                                <div class="f-section-content pl-2">
                                    <div *ngFor="let param of paramsData;">
                                        <div class="col-12 mb-2 d-inline-block">
                                            <div class="farris-group-wrap">
                                                <div class="form-group farris-form-group">
                                                    <label class="col-form-label">
                                                        <span class="farris-label-text"
                                                            [title]="param.name">{{param.shownName}}
                                                        </span>

                                                        <div *ngIf="param.description" class="farris-label-tips ml-2"
                                                            [placement]="'right'" [tipCls]="'f-parameter-tooltip-class'"
                                                            farrisTooltip [content]="param.description">
                                                            <i class="f-icon f-icon-message_help"
                                                                style="color:#878D99;"></i>
                                                        </div>
                                                        <span title="参数已在构件中被移除，请更新！" *ngIf="param.isDisused">
                                                            <i
                                                                class="ml-2 f-icon f-icon-message_warning text-warning text-tip"></i>
                                                        </span>
                                                    </label>

                                                    <div class="farris-input-wrap f-cmp-inputgroup">

                                                        <!-- <ide-parameter-editor [viewModelId]="activeViewModel.id"
                                                            [parameterName]="param.name"
                                                            [editorType]="param?.controlSource?.type || null"
                                                            [defaultValue]="param?.defaultValue"
                                                            [options]="param?.controlSource?.context || {}"
                                                            [(value)]="param.value" [command]="currentTreeNode"
                                                            (valueChange)="getParameterValue()"
                                                            (applicationSelectionChange)="onApplicationSelectionChange($event)">
                                                        </ide-parameter-editor> -->
                                                        <input type="input" class="form-control"
                                                            [(ngModel)]="param.value">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="f-struct-wrapper"
                            *ngIf="currentTreeNode && !isSelectCommandNode && currentTreeNode.data['componentName'] ">
                            <div class="f-section-form f-section-in-main f-section pt-0">
                                <div class="f-section-header">
                                    <div class="f-title">
                                        <h4 class="f-title-text">构件</h4>
                                    </div>
                                </div>
                                <div class="f-section-content pl-2">
                                    <div class="col-12 mb-2 d-inline-block">
                                        <div class="farris-group-wrap">
                                            <div class="form-group farris-form-group">
                                                <label class="col-form-label">
                                                    <span
                                                        class="farris-label-text">构件名称：{{currentTreeNode.data['componentName']}}
                                                    </span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </farris-splitter>




</div>



<ng-template #methodNameTpl let-ctx>
    {{ctx.rowData['name']}}
    <div *ngIf="ctx.rowData.description && ctx.rowData.description!==ctx.rowData.name" class="farris-label-tips ml-2"
        [placement]="'right'" [tipCls]="'f-parameter-tooltip-class'" farrisTooltip [content]="ctx.rowData.description">
        <i class="f-icon f-icon-message_help" style="color:#878D99;"></i>
    </div>
    <span title="方法已失效，请确认构件中是否包含此方法" *ngIf="ctx.rowNode.node.isInValid">
        <i class="ml-2 f-icon f-icon-message_warning text-error text-tip"></i>
    </span>

    <span title="构件中方法的参数发生变更，请更新右侧参数列表" *ngIf="ctx.rowNode.node.needRefreshParam">
        <i class="ml-2 f-icon f-icon-message_warning text-warning text-tip"></i>
    </span>
</ng-template>